<div style="margin-top: 10px;">
    <table class="grid" id="collectingReceiptTbl" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th style="width: 40px;">{translate}No.{/translate}</th>
                <th style="width: 130px;">{translate}Time{/translate}</th>
                <th style="width: 80px;">{translate}Receipt code{/translate}</th>
                <th style="width: 80px;">{translate}Money amount{/translate}</th>
                <th style="width: 80px; padding-left: 20px;">{translate}Collection type{/translate}</th>
                <th style="width: 130px;">{translate}Note{/translate}</th>
                <th style="width: 150px;">{translate}Cashier{/translate}</th>
            </tr>
        </thead>
        <tbody>
            {foreach from=$paymentInfo item=info}
            <tr id="{$info.pay_receipt_id}">
                <td>{$index++}</td>
                <td>
                    {$info.created_time}
                    <input type="hidden" id="createdDate_{$info.pay_receipt_id}" value="{$info.created_date_vi}">
                </td>
                <td><a href="javascript:{$jsAction}('{$info.pay_receipt_id}', '{$dialogId}')"><span id="receiptCode_{$info.pay_receipt_id}">{$info.receipt_code}</span></a></td>
                <td align="right"><span style="color: {$info.color}" id="amount_{$info.pay_receipt_id}">{$info.amount_formatted}</span></td>
                <td style="padding-left: 20px;">{$info.payment_type}</td>
                <td><div style="overflow: auto">{$info.note}</div></td>
                <td>{$info.cashierName}</td>
            </tr>
            {/foreach}
        </tbody>
    </table>
</div>